<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select filterable placeholder="请选择门店" v-model="store_id" style="width:300px">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker :clearable="false" style="width:130px" v-model="formInline.time" value-format="yyyy-MM" type="month" format="yyyy-MM"
            :picker-options="pickerOptions" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" show-summary :summary-method="getSummaries">
        <el-table-column align="center" label="时间" prop="time"></el-table-column>
        <el-table-column align="center" label="门店" prop="store_name"></el-table-column>
        <el-table-column align="center" prop="percent">
          <template slot="header" slot-scope="scope">
            <span>出货金额比例</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                参考月：当前月往前推，最近三个月为参考月。举例：本月是8月,8月9号生成9月的预<br />
                估订货指标，由于8月没有实际营业额和出货金额，所以参考月是5月、6月、7月出货<br />
                金额比例,参考月各月的“出货金额”除以“实际营业额”相加再除以3。举例：当前月为8月<br />
                参考月为5月、6月、7月。a、计算公式为：（5月出货金额/实际营业额+6月出货金额<br />
                /实际营业额+7月出货金额/实际营业额）/3=9月出货金额比例 b、出货金额：根据划分<br />
                的5个礼品区域来统计出货数量 c、实际营业额：指财务管理>>账务查询里的应收合计
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            {{scope.row.percent}}%
          </template>
        </el-table-column>
        <el-table-column align="center" prop="money">
          <template slot="header" slot-scope="scope">
            <span>预估营业额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：本月是8月，算的是9月的 预估订货指标预估营业额：指的是运营管理>>考<br />
                核指标管理>>门店指标确认（营业类指标-总营业额目标）的9月的总营业额目标
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="all_out_money">
          <template slot="header" slot-scope="scope">
            <span>预估总出库金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：本月是8月，算的是9月的 预估订货指标预计总出库<br />
                金额：计算公式：9月预估营业额*9月出货金额比例*1.2
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="display_money">
          <template slot="header" slot-scope="scope">
            <span>陈列库存总金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：8月9号生成指标门店陈列库存总金额：数据来自运营<br />
                管理>>门店陈列库存（新页面）。指7月末的陈列库存金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bad_money">
          <template slot="header" slot-scope="scope">
            <span>上月末坏库存金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：8月9号生成指标上月末坏库存金额：数据来自报表管理<br />
                >>运营报表>>礼品坏库存明细表。指的是7月末的坏库存金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="in_money">
          <template slot="header" slot-scope="scope">
            <span>待入库礼品金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：8月9号生成指标待入库礼品金额：指截止到指的<br />
                9号早上凌晨6点订单确认发货后，还未入库的礼品金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="last_money">
          <template slot="header" slot-scope="scope">
            <span>上月末库存金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：本月是8月9号上月末库存金额：数据来自报表管<br />
                理>>仓储报表>>门店库存汇总表。指7月末的库存金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="last_out_money">
          <template slot="header" slot-scope="scope">
            <span>上月预估总出库金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：本月是8月9号，算的是9月的预估订货指标上月预估总出货金额：数据来自报表<br />
                管理>>运营管理>>门店订货指标（上月的预估总出库金额）。指8月的预估总出货金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.last_out_money/1>scope.row.bmw_money/1}">{{scope.row.last_out_money}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bmw_money">
          <template slot="header" slot-scope="scope">
            <span>预估订货总金额</span>
            <el-tooltip placement="bottom">
              <div slot="content">
                举例：本月是8月9号，算的是9月的预估订货指标预估订货总金额：计算公式：<br />
                9月预计总出货金额-（7月末库存金额+所有待入库礼品金额*90%-7月末的门店<br />
                陈列库存总金额-7月末坏库存金额）+8月预估总出货金额=9月预估订货总金额
              </div>
              <i class="el-icon-question" style="color:#000;margin-left:5px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <router-link :to="{name:'operation/category_order_indicator',params:{row:scope.row,global:global,routerflag:true}}" style="color:#409eff;">
              {{scope.row.bmw_money}}</router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getOrderIndex, getStore } from '@/api/dashboard/orderIndex';
import { pickerOptionsMonth } from '@/utils';
export default {
  data() {
    return {
      global: {
        store_name: '',
        starttime: ''
      },
      store_id: this.$store.getters.optionId,
      all_store_id: '',
      storeList: [],
      listLoading: false,
      remark: [],
      list: [],
      money: '',
      formInline: {
        store_id: '',
        time:
          new Date().getDate() < 9
            ? new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth())).toISOString().slice(0, 7)
            : new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() + 1)).toISOString().slice(0, 7)
      },
      pickerOptions: new Date().getDate() < 9 ? pickerOptionsMonth() : pickerOptionsMonth(1)
    };
  },
  created() {
    this.getStoreList();
  },
  methods: {
    getStoreList() {
      getStore({ look_del: 0, category_id: 428 }).then(response => {
        this.all_store_id = '';
        response.forEach(val => {
          this.all_store_id += val.id + ',';
        });
        this.all_store_id = this.all_store_id.substr(0, this.all_store_id.length - 1);
        if (response.length > 1) {
          response.unshift({ id: -1, name: '全门店' });
        }
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.store_id = this.storeList[0].id;
          }
        }
      });
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index > 0) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += 0;
            sums[index] = sums[index].toFixed(2) * 1;
            if (column.property == 'percent' || column.property == 'store_name') {
              sums[index] = '-';
            }
          } else {
            sums[index] = '-';
          }
        }
      });
      return sums;
    },
    // 搜索
    searchClick() {
      if (!this.store_id) {
        this.$message.error('请选择门店');
        return;
      }
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.list = [];
      this.listLoading = true;
      if (this.store_id == -1) {
        this.formInline.store_id = this.all_store_id;
      } else {
        this.formInline.store_id = this.store_id;
      }
      getOrderIndex(this.formInline).then(res => {
        this.list = res.data;
        this.list &&
          this.list.forEach(val => {
            val.time = this.formInline.time;
            this.global.starttime = this.formInline.time;
            val.money = (val.money / 100).toFixed(2);
            val.all_out_money = (val.all_out_money / 1000000).toFixed(2);
            val.display_money = (val.display_money / 1000000).toFixed(2);
            val.in_money = (val.in_money / 1000000).toFixed(2);
            val.last_money = (val.last_money / 1000000).toFixed(2);
            val.bad_money = (val.bad_money / 1000000).toFixed(2);
            val.last_out_money = (val.last_out_money / 1000000).toFixed(2);
            val.bmw_money = (val.bmw_money / 1000000).toFixed(2);
          });
        this.listLoading = false;
      });
    }
  }
};
</script>

